<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 此部分为网页描述，便于被搜索引擎捕捉的一种优化方式，提高流量以及点击的一种方法 -->
    <meta name="description" content="品优购商城是一家有味道的网络购物平台">
    <!-- 关键字 -->
    <meta name="keywords" content="笔记本,电脑,平板电脑,智能手机">

    <title>品优购商城-正品低价，物美价廉的优质网购平台</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="shortcut icon" href="优.ico">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- shortcut -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！</li>
                    <li><a href="#">请登录</a><a href="#">免费注册</a></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">我的品优购 </a></li>
                    <li><a href="#">品优购会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">关注品优购 </a></li>
                    <li><a href="#">客户服务 </a></li>
                    <li><a href="#">网站导航 </a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- shortcut -->

    <!-- header -->
    <header class="w header">
        <div class="logo" title="品优购商城-正品低价，物美价廉的优质网购平台">
            <h1><a href="index.html" style="font-size: 0;">品优购商城-正品低价，物美价廉的优质网购平台</a>
            </h1>
        </div>
        <div class="search">
            <form action="#">
                <input type="search" placeholder="语言开发" autocomplete="none">
                <input type="button" value="搜索">
                <ul>
                    <li><a href="#">优惠购首发</a></li>
                    <li><a href="#">亿元优惠</a></li>
                    <li><a href="#">9.9元团购</a></li>
                    <li><a href="#">美满99减30</a></li>
                    <li><a href="#">办公用品</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">通信</a></li>
                </ul>
            </form>
        </div>
        <div class="shopcar">
            <a href="#">我的购物车</a>
            <div class="count">8</div>
        </div>
    </header>
    <!-- header -->
    <!-- nav -->
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <!-- 这个导航栏不是横向就完事了，还有一部分跨到下面去了，模拟一下下拉的写法 -->
                <!-- 这个可以在js中设置隐藏与显示 -->
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="#">手机、数码、通信</a></li>
                        <li><a href="#">电脑、办公</a></li>
                        <li><a href="#">家居、家具、家装、厨具</a></li>
                        <li><a href="#">男装、女装、童装、内衣</a></li>
                        <li><a href="#">个户化妆、清洁用品、宠物</a></li>
                        <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
                        <li><a href="#">运动户外、钟表</a></li>
                        <li><a href="#">汽车、汽车用品</a></li>
                        <li><a href="#">母婴、玩具乐器</a></li>
                        <li><a href="#">食品、酒类、生鲜、特产</a></li>
                        <li><a href="#">医药保健</a></li>
                        <li><a href="#">图书、音像、电子书</a></li>
                        <li><a href="#">彩票、旅行、充值、票务</a></li>
                        <li><a href="#">理财、众筹、白条、保险</a></li>
                    </ul>
                </div>
            </div>
            <div class="navitems">
                <ul>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">美装馆</a></li>
                    <li><a href="#">传智超市</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">闪购</a></li>
                    <li><a href="#">团购</a></li>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">有趣</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- nav -->
    <!-- main -->
    <div class="main w">
        <div class="focus">
            <img src="images/main_bg.png" alt="">
        </div>
        <div class="newsflash">
            <dl>
                <dt><span>品优购快报</span> <a href="#">更多&nbsp;</a></span></dt>
                <dd><a href="#"><span class="news_type">[特惠]</span> 备战开学季 全民半价购数码</a></dd>
                <dd><a href="#"><span class="news_type">[公告]</span> 品优稳占家电网购六成份额</a></dd>
                <dd><a href="#"><span class="news_type">[特惠]</span> 备战开学季 全民半价购数码</a></dd>
                <dd><a href="#"><span class="news_type">[特惠]</span> 备战开学季 全民半价购数码</a></dd>
                <dd><a href="#"><span class="news_type">[特惠]</span> 备战开学季 全民半价购数码</a></dd>
            </dl><span news_type></span>
            <div class="lifeservice">
                <ul>
                    <li><a href="#"><i></i>话费</a></li>
                    <li><a href="#"><i></i>机票</a></li>
                    <li><a href="#"><i></i>电影票</a></li>
                    <li><a href="#"><i></i>游戏</a></li>
                    <li><a href="#"><i></i>彩票</a></li>
                    <li><a href="#"><i></i>加油卡</a></li>
                    <li><a href="#"><i></i>酒店</a></li>
                    <li><a href="#"><i></i>火车票</a></li>
                    <li><a href="#"><i></i>众筹</a></li>
                    <li><a href="#"><i></i>理财</a></li>
                    <li><a href="#"><i></i>礼品卡</a></li>
                    <li><a href="#"><i></i>白条</a></li>
                </ul>
            </div>
            <div class="news_tiny_banner">
                <a href="#"><img src="images/hi_03.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- main -->
    <!-- recommend -->
    <div class="recommend w">
        <i></i>
        <div class="rec_today">
            <ul>
                <li><a href="#"><img src="images/today_03.png" alt=""></a></li>
                <li><a href="#"><img src="images/today_05.png" alt=""></a></li>
                <li><a href="#"><img src="images/ttt_03.png" alt=""></a></li>
                <li><a href="#"><img src="images/today_09.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <!-- recommend -->

    <!-- guess_you_love -->
    <div class="guess_you_love w">
        <div class="guess_hd">
            <h4>猜你喜欢</h4>
            <button>换一批<i></i></button>
        </div>
        <div class="guess_bd">
            <ul>
                <li><a href="#">
                        <div class="img_fix">
                            <img src="upload/p1.png" alt="">
                        </div>
                        <div class="product_content_m">
                            <div class="product_content_m_title">阳光美包新款单肩包女包时尚子母包四件套女</div>
                            <div class="product_content_m_price">￥116.00</div>
                        </div>
                    </a></li>
                <li><a href="#">
                        <div class="img_fix">
                            <img src="upload/p2.png" alt="">
                        </div>
                        <div class="product_content_m">
                            <div class="product_content_m_title">爱仕达 30CM炒锅不粘锅NWG8330E电磁炉炒</div>
                            <div class="product_content_m_price">￥116.00</div>
                        </div>
                    </a></li>
                <li><a href="#">
                        <div class="img_fix">
                            <img src="upload/p3.png" alt="">
                        </div>
                        <div class="product_content_m">
                            <div class="product_content_m_title">捷波朗（jabra）BOOSI劲步</div>
                            <div class="product_content_m_price">￥116.00</div>
                        </div>
                    </a></li>
                <li><a href="#">
                        <div class="img_fix">
                            <img src="upload/p4.png" alt="">
                        </div>
                        <div class="product_content_m">
                            <div class="product_content_m_title">欧普 JYLZ08面板灯平板灯铝</div>
                            <div class="product_content_m_price">￥116.00</div>
                        </div>
                    </a></li>
                <li><a href="#">
                        <div class="img_fix">
                            <img src="upload/p5.png" alt="">
                        </div>
                        <div class="product_content_m">
                            <div class="product_content_m_title">三星（G5500）移动联</div>
                            <div class="product_content_m_price">￥116.00</div>
                        </div>
                    </a></li>
                <li><a href="#">
                        <div class="img_fix">
                            <img src="upload/p6.png" alt="">
                        </div>
                        <div class="product_content_m">
                            <div class="product_content_m_title">韩国所望紧致湿润精华露400ml</div>
                            <div class="product_content_m_price">￥116.00</div>
                        </div>
                    </a></li>
            </ul>
        </div>
    </div>
    <!-- guess_you_love -->

    <!-- interesting area -->

    <!-- interesting area -->

    <!-- floor -->
    <!-- 此层把所有相同样式的产品展示区都囊括进来了 -->
    <div class="floor w">
        <div class="jiadian">
            <!-- 不要觉得名字起的太一般会就不敢起了，反正都是靠子代，后代选择器搞的，不怕重名的小元素，尽管用吧 -->
            <div class="box_hd">
                <h4>家用电器</h4>
                <div class="tab_list">
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box_bd">
                <div class="tab_content">
                    <!-- 注意！此处为标签元素部分！这里面可以写很多个box，用来分别与tab_list中的逐一对应 -->
                    <!-- 我们给它们设置几乎一样的样式，完全一样的大小，然后定位 -->
                    <!-- js中通过改它们的 z-index或者改display来实现切换-->

                    <div class="tab_list_item">
                        <ul>
                            <li>
                                <ul>
                                    <li><a href="#">节能补贴</a></li>
                                    <li><a href="#">4K电视</a></li>
                                    <li><a href="#">空气净化器</a></li>
                                    <li><a href="#">IH电饭煲</a></li>
                                    <li><a href="#">滚筒洗衣机</a></li>
                                    <li><a href="#">电热水器</a></li>
                                </ul>
                                <h6>三星曲面电视</h6>
                                <h6>抽奖送豪礼</h6>
                                <div class="img_fix">
                                    <img src="upload/p7.png" alt="">
                                </div>
                            </li>
                            <li>
                                <h6>烧水壶智能光控泡茶壶茶具套装
                                    满299.00减40.00</h6>
                                <div class="img_fix">
                                    <img src="upload/p8.png" alt="">
                                </div>
                                <div class="dots">
                                    <i></i><i></i><i></i>
                                </div>
                            </li>
                            <li>
                                <div class="product_info_s">
                                    <h6>每满200减20元</h6>
                                    <h6>烘焙节1元抢购</h6>
                                    <div class="img_fix">
                                        <img src="upload/p9.png" alt="">
                                    </div>
                                </div>
                                <div class="product_info_s">
                                    <h6>买乐视电视享优惠</h6>
                                    <h6>送60个月会员</h6>
                                    <div class="img_fix">
                                        <img src="upload/p10.png" alt="">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="product_info_b">
                                    <h6>8.20彩电宅购节</h6>
                                    <h6>65村4K智能电视3799</h6>
                                    <div class="img_fix">
                                        <img src="upload/p11.png" alt="">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="product_info_s">
                                    <h6>消暑神器全场领券</h6>
                                    <h6>1元赢空调</h6>
                                    <div class="img_fix">
                                        <img src="upload/p12.png" alt="">
                                    </div>
                                </div>
                                <div class="product_info_s">
                                    <h6>买乐视电视享优惠</h6>
                                    <h6>送60个月会员</h6>
                                    <div class="img_fix">
                                        <img src="upload/p10.png" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <div class="shouji">
            <!-- 不要觉得名字起的太一般会就不敢起了，反正都是靠子代，后代选择器搞的，不怕重名的小元素，尽管用吧 -->
            <div class="box_hd">
                <h4>手机通信</h4>
                <div class="tab_list">
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">品质优选</a></li>
                        <li><a href="#">新机尝试</a></li>
                        <li><a href="#">高性价比</a></li>
                        <li><a href="#">口碑推荐</a></li>
                        <li><a href="#">合约机</a></li>
                        <li><a href="#">手机卡</a></li>
                        <li><a href="#">店铺精选</a></li>
                        <li><a href="#">手机配件</a></li>
                    </ul>
                </div>
            </div>
            <div class="box_bd">
                <div class="tab_content">
                    <!-- 注意！此处为标签元素部分！这里面可以写很多个box，用来分别与tab_list中的逐一对应 -->
                    <!-- 我们给它们设置几乎一样的样式，完全一样的大小，然后定位 -->
                    <!-- js中通过改它们的 z-index或者改display来实现切换-->

                    <div class="tab_list_item">
                        <ul>
                            <li>
                                <ul>
                                    <li><a href="#">手机通讯</a></li>
                                    <li><a href="#">以旧换新</a></li>
                                    <li><a href="#">双卡双待</a></li>
                                    <li><a href="#">自营配件</a></li>
                                    <li><a href="#">金属机身</a></li>
                                    <li><a href="#">高清屏</a></li>
                                </ul>
                                <h6>中兴A1 低至499元</h6>
                                <h6>国民指纹，超6万好评</h6>
                                <div class="img_fix">
                                    <img src="upload/p14.png" alt="">
                                </div>
                            </li>
                            <li>
                                <h6>烧水壶智能光控泡茶壶茶具套装
                                    满299.00减40.00</h6>
                                <div class="img_fix">
                                    <img src="upload/p15.png" alt="">
                                </div>
                                <div class="dots">
                                    <i></i><i></i><i></i>
                                </div>
                            </li>
                            <li>
                                <div class="product_info_s">
                                    <h6>每满200减20元</h6>
                                    <h6>烘焙节1元抢购</h6>
                                    <div class="img_fix">
                                        <img src="upload/p16.png" alt="">
                                    </div>
                                </div>
                                <div class="product_info_s">
                                    <h6>买乐视电视享优惠</h6>
                                    <h6>送60个月会员</h6>
                                    <div class="img_fix">
                                        <img src="upload/p17.png" alt="">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="product_info_b">
                                    <h6>8.20彩电宅购节</h6>
                                    <h6>65村4K智能电视3799</h6>
                                    <div class="img_fix">
                                        <img src="upload/p18.png" alt="">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="product_info_s">
                                    <h6>消暑神器全场领券</h6>
                                    <h6>1元赢空调</h6>
                                    <div class="img_fix">
                                        <img src="upload/p19.png" alt="">
                                    </div>
                                </div>
                                <div class="product_info_s">
                                    <h6>买乐视电视享优惠</h6>
                                    <h6>送60个月会员</h6>
                                    <div class="img_fix">
                                        <img src="upload/p20.png" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- floor -->

    <!-- footer -->
    <footer class="footer">
        <div class="w">
            <div class="mod_services">
                <ul>
                    <li><a href="#">
                            <i></i>
                            <dl>
                                <dt>正品保障</dt>
                                <dd>正品保障，提供发票</dd>
                            </dl>
                        </a></li>
                    <li><a href="#">
                            <i></i>
                            <dl>
                                <dt>急速物流</dt>
                                <dd>急速物流，急速送达</dd>
                            </dl>
                        </a></li>
                    <li><a href="#">
                            <i></i>
                            <dl>
                                <dt>无忧售后</dt>
                                <dd>7天无理由退换货</dd>
                            </dl>
                        </a></li>
                    <li><a href="#">
                            <i></i>
                            <dl>
                                <dt>特色服务</dt>
                                <dd>私人定制家电套餐</dd>
                            </dl>
                        </a></li>
                    <li><a href="#">
                            <i></i>
                            <dl>
                                <dt>帮助中心</dt>
                                <dd>您的购物指南</dd>
                            </dl>
                        </a></li>
                </ul>
            </div>
            <div class="mod_help">
                <ul>
                    <li>
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href="#">购物流程</a></dd>
                            <dd><a href="#">会员介绍</a></dd>
                            <dd><a href="#">生活旅行/团购</a></dd>
                            <dd><a href="#">常见问题</a></dd>
                            <dd><a href="#">大家电</a></dd>
                            <dd><a href="#">联系客服</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>配送方式</dt>
                            <dd><a href="#">上门自提</a></dd>
                            <dd><a href="#">211限时达</a></dd>
                            <dd><a href="#">配送服务查询</a></dd>
                            <dd><a href="#">配送费收取标准</a></dd>
                            <dd><a href="#">海外配送</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>支付方式</dt>
                            <dd><a href="#">货到付款</a></dd>
                            <dd><a href="#">在线支付</a></dd>
                            <dd><a href="#">分期付款</a></dd>
                            <dd><a href="#">邮局汇款</a></dd>
                            <dd><a href="#">公司转账</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>售后服务</dt>
                            <dd><a href="#">售后政策</a></dd>
                            <dd><a href="#">价格保护</a></dd>
                            <dd><a href="#">退款说明</a></dd>
                            <dd><a href="#">法修/退换货</a></dd>
                            <dd><a href="#">取消订单</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>特色服务</dt>
                            <dd><a href="#">夺宝岛</a></dd>
                            <dd><a href="#">DIY装机</a></dd>
                            <dd><a href="#">延保服务</a></dd>
                            <dd><a href="#">品优购E卡</a></dd>
                            <dd><a href="#">品优购通信</a></dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>帮助中心</dt>
                            <dd><img src="images/wx_cz.jpg" alt=""></dd>
                            <dd>品优购客户端</dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="mod_copyright">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">联系客服</a></li>
                    <li><a href="#">商家入驻</a></li>
                    <li><a href="#">营销中心</a></li>
                    <li><a href="#">手机品优购</a></li>
                    <li><a href="#">友情链接</a></li>
                    <li><a href="#">销售联盟</a></li>
                    <li><a href="#">品优购社区</a></li>
                    <li><a href="#">品优购工艺</a></li>
                    <li><a href="#">English Site</a></li>
                    <li><a href="#">Contact U</a></li>
                </ul>
                <div class="footer_address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：1000C96 电话：400-618-4000 传真：010-82935100 邮箱:
                    zhanghj+itcast.cn</div>
                <div class="footer_rec">京ICP备08001421号京公网安备110108007702</div>
                <!-- 以上部分可以做的草率一些，即直接复制ps里的文字，稍微加点链接就行了 -->
                </ul>
            </div>
        </div>
    </footer>
    <!-- footer -->
</body>

</html>